<template>
  <div>
    <el-card class="box-card" shadow="hover" style="margin-bottom:20px">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <el-form ref="dataForm" :rules="rules" :model="user">
        <el-form-item label="姓名">
          <el-input v-model.trim="user.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model.trim="user.mobile" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" shadow="hover" style="margin-bottom:20px">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <el-form ref="dataForm2" :rules="rules2" :model="user2">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model.trim="user2.oldPwd" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model.trim="user2.newPwd" placeholder="请输入8位以上字母和数字组合密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit2">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>发票信息</span>
      </div>
      <el-form ref="dataForm3" :rules="rules3" :model="user3">
        <el-form-item label="名称" prop="taxName">
          <el-input v-model.trim="user3.taxName" />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxNo">
          <el-input v-model.trim="user3.taxNo" />
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model.trim="user3.taxBank" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model.trim="user3.taxBankNo" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model.trim="user3.taxAddress" />
        </el-form-item>
        <el-form-item label="联系电话" prop="taxMobile">
          <el-input v-model.trim="user3.taxMobile" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit3">修改开票信息</el-button>
        </el-form-item>
      </el-form>
    </el-card> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [{ required: true, validator: this.$mobileValidator, trigger: 'blur' }],
      },
      user: Object.assign({}, this.$store.getters.userInfo),
      rules2: {
        oldPwd: [{ required: true, message: '请输入', trigger: 'blur' }],
        newPwd: [{ required: true, validator: this.$passwordValidator, trigger: 'blur' }],
      },
      user2: {
        oldPwd: '',
        newPwd: '',
      },
      rules3: {
        taxName: [{ required: true, message: '请输入', trigger: 'blur' }],
        taxNo: [{ required: true, message: '请输入', trigger: 'blur' }],
        taxMobile: [{ required: true, validator: this.$mobileValidator, trigger: 'blur' }],
      },
      user3: Object.assign({}, this.$store.getters.userInfo)
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    userInfo(val) {
      this.user = Object.assign({}, val)
      this.user3 = Object.assign({}, val)
    }
  },
  methods: {
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const params = {
            name: this.user.name,
            mobile: this.user.mobile
          }
          this.$store.dispatch('user/updateMember', params).then((res) => {
            this.$message({
              message: '编辑成功',
              type: 'success',
              duration: 5 * 1000
            })
          })
        }
      })
    },
    submit2() {
      this.$refs['dataForm2'].validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/passwordUpdate', this.user2).then((res) => {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 5 * 1000
            })
          })
        }
      })
    },
    submit3() {
      this.$refs['dataForm3'].validate((valid) => {
        if (valid) {
          const params = {
            taxName: this.user3.taxName,
            taxNo: this.user3.taxNo,
            taxBank: this.user3.taxBank,
            taxBankNo: this.user3.taxBankNo,
            taxAddress: this.user3.taxAddress,
            taxMobile: this.user3.taxMobile
          }
          this.$store.dispatch('user/updateMember', params).then((res) => {
            this.$message({
              message: '编辑成功',
              type: 'success',
              duration: 5 * 1000
            })
          })
        }
      })
    },
  }
}
</script>
